
<template
>
  <div class="wrapper">
    <el-header class="container">
      <el-row class="rowr">
        <!--头部-->
        <el-col :span="24" class="topbar-wrap">
          <div class="topbar-logo topbar-btn">
            <a href="/"
              ><img src="../assets/logo.png" style="padding-left: 8px"
            /></a>
          </div>
          <div class="topbar-logos">
            <a href="/" style="color: #00ffff"
              ><span v-show="!$store.state.collapsed"></span
            ></a>
          </div>
          <div class="topbar-title">
            <!-- 注意：这里就是topNavState作用之处，根据当前路由所在根路由的type值判断显示不同顶部导航菜单 -->
            <el-col :span="24">
              <el-menu
                class="el-menu-demo"
                mode="horizontal"
                :default-active="toIndex()"
                @select="handleSelect"
              >
                <template>
                  <el-menu-item
                    v-for="item in items"
                    :index="item.index"
                    :key="item.index"
                  >
                    <template slot="title">
                      <i class="el-icon-office-building"></i>
                      <span slot="title">{{ item.title }}</span>
                    </template>
                  </el-menu-item>
                </template>
              </el-menu>
            </el-col>
          </div>
          <!-- z最右边 -->
          <div class="topbar-account topbar-btn">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link userinfo-inner">
                <!-- -->
                -->
                <!-- 姓名  头像{{ nickname }}  el-icon-video-camera-solid-->
                <i class="el-icon-video-camera-solid"></i>
                <i class="el-icon-message-solid"></i>
                <i class="iconfont icon-user"></i>
                <span class="el-dropdown-link">
                  {{ username }}
                  <i class="el-icon-caret-bottom"></i>
                </span>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <div @click="jumpTo('/user/profile')">
                    <span style="color: #555; font-size: 14px">个人信息</span>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="jumpTo('/user/changepwd')">
                    <span style="color: #555; font-size: 14px">修改密码</span>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </el-header>

    <!-- 页面左侧二级菜单栏，和主体内容区域部分 -->
    <el-main>
      <router-view></router-view>
    </el-main>
    <!-- <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        // 水平一级菜单栏的菜单
        { index: "test1", title: "客户管理" },
        { index: "test2", title: "任务/审批" },
        { index: "test3", title: "日志" },
        { index: "test4", title: "通讯录" },
        { index: "test5", title: "商业智能" },
        { index: "test6", title: "日历" },
        { index: "test7", title: "项目管理" },
      ],
    };
  },
  computed: {
    username() {
      // let username = localStorage.getItem('ms_username');
      // return username ? username : this.name;
      return "admin";
    },
  },
  methods: {
    // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
    toIndex() {
      return this.$route.path.split("/")[1];
    },
    // 切换菜单栏
    handleSelect(index) {
      this.$router.push("/" + index);
      console.log(this.$router.push("/" + index));
    },
    // 用户名下拉菜单选择事件
  },
};
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
}
* {
  margin: 0;
  padding: 0;
}

.el-aside {
  margin: 0;
  padding: 0;
  margin-top: -10px;
  text-align: center;
  line-height: 300px;
  height: 800px;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
.rowr {
  margin: 0;
  padding: 0;
  width: 100%;
}

.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}

/* top navbar style start */
.topbar-wrap {
  height: 50px;
  line-height: 50px;
  background: #ffffff;
  width: 100%;
}

.topbar-wrap .topbar-btn {
  color: #fff;
}

.topbar-wrap .topbar-logo {
  float: left;
  width: 60px;
  line-height: 26px;
  margin: 0;
  padding: 0;
}

.topbar-wrap .topbar-logos {
  margin: 0;
  padding: 0;
  float: left;
  width: 200px;
  line-height: 48px;
  font-size: 14px;
}

.topbar-wrap .topbar-logo img,
.topbar-wrap .topbar-logos img {
  height: 30px;
  margin: 0;
  padding: 0;
}

.topbar-wrap .topbar-title {
  float: left;
  text-align: center;
  padding-left: 70px;
  border-left: 0px solid rgb(255, 255, 255);
}

.topbar-title .el-menu--horizontal {
  background-color: transparent;
}

.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item.is-active {
  color: rgb(0, 0, 0);
  background-color: transparent;
  border-bottom: 3px solid #409eff !important;
}

.topbar-title .el-menu--horizontal > .el-menu-item {
  height: 50px;
  line-height: 50px;
  width: 100px;
  color: rgb(0, 0, 0);
  display: flex;
}

.topbar-title .el-menu--horizontal > .el-menu-item > i {
  font-size: 10px;
  color: #000;
  text-align: center;
  align-self: center;
  color: rgb(0, 0, 0);
}

.topbar-title .el-menu--horizontal > .el-menu-item > i:hover {
  color: #409eff;
}

.el-menu-item .iconfont {
  margin-right: 10px;
  display: inline-block;
  width: 80px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}

.topbar-wrap .topbar-account {
  float: right;
  padding-right: 12px;
}

.topbar-wrap .topbar-timer {
  display: inline-block;
}
.el-main {
  width: 80vw;
}
/* top navbar style end */
</style>